<template>
  <div class="ProjInfo_bottomLeft">
    <div class="back">
      <div class="title">施工工艺</div>
      <div class="content">
        <div class="func-item" v-for="(item, i) in technology" :key="i">
          <div class="pic" v-if="item.Attachs[0].AttachType == 1">
            <img :src="item.Attachs[0].Url" v-on:click="bigShowing(item)" />
          </div>
          <div class="video" v-else>
            <video :src="item.Attachs[0].Url" controls></video>
          </div>
          <div class="name">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="imgBigTitle"
      :visible.sync="imgBigShow"
      class="imgBig"
      width="50%"
      top="55px"
    >
      <img :src="imgBigUrl" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['technology'],
  components: {},
  data () {
    return {
      imgBigShow: false,
      imgBigUrl: '',
      imgBigTitle: ''
    }
  },

  watch: {},

  created () {},

  mounted () {},

  methods: {
    bigShowing (item) {
      this.imgBigShow = true
      this.imgBigUrl = item.Attachs[0].Url
      this.imgBigTitle = item.title
    }
  }
}
</script>
<style lang="less" scoped>
.ProjInfo_bottomLeft {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url("../../assets/projInfo/背景.png");
  background-size: 100% 100%;
  margin-right: 10px;
  .back {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    // background: url("../../assets/projInfo/左下.png");
    // background-size: 100% 100%;
    .title {
      width: 100%;
      height: 30px;
      color: #fff;
      font-size: 20px;
      line-height: 30px;
      padding-left: 5px;
      background: url("../../assets/projInfo/上.png");
      background-size: 100% 100%;
    }
    .content {
      width: 100%;
      height: 100%;
      background: url("../../assets/projInfo/下.png");
      background-size: 100% 100%;
      display: flex;
      overflow: hidden;
      justify-content: space-around;
      align-items: center;
      cursor: pointer;
      .func-item {
        height: 100%;
        width: 30%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .video {
          width: 240px;
          height: 170px;
          video {
            width: 240px;
            height: 170px;
            display: block;
            object-fit: fill;
          }
        }
        .pic {
          width: 240px;
          height: 170px;
          img {
            width: 240px;
            height: 170px;
            display: block;
            object-fit: fill;
          }
        }
        .name {
          margin: 10px 0 10px 0;
          height: 22px;
          overflow: hidden;
          font-size: 18px;
          color: #07ffd7;
          text-align: center;
        }
      }
      // .func-item:last-child {
      //   margin: 10px 0 0 0;
      // }
    }
  }
  .imgBig {
    img {
      width: 100%;
      height: 600px;
      object-fit: fill;
    }
  }
}
</style>
